@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";

.checkbox_wrapper {
  display: flex;
  align-items: center;
  gap: Spacings.$spacing03;
  cursor: pointer;
  border-radius: Radius.$normal;

  .checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: Radius.$normal;

    &.filled {
      background-color: var(--primary-0);
      border-color: var(--primary-0);
    }
  }

  &.disabled {
    background-color: var(--background-3);
    opacity: 0.4;
    cursor: default;
  }

  &:hover {
    background-color: var(--background-3);
  }
}
